<template>
  <div class="app-container">
     <div class="el-card">
        <div class="el-card_body">
         <div class="el-alert">
          <div class="el-icon-info" />
          <div class="content">共100条记录</div>
         </div>
       <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{textAlign: 'center'}"
      >
      <el-table-column
        prop="type"
        label="操作类型"
        width="250"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="author"
        label="操作人"
        width="300"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="title"
        label="执行结果"
        width="300"
        >
      </el-table-column>
      <el-table-column
        prop="display_time"
        label="操作时间"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="forecast"
        label="描述"
        align="center"
        >
      </el-table-column>
    </el-table>
      <el-pagination
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout=" prev, pager,next,sizes, jumper"
      :page-sizes="[ 20, 30, 50]"
      :total="total"
      :current-page="page.page"
      >
    </el-pagination>
        </div>
     </div>
  </div>
</template>

<script>
import { list } from '@/api/example/table.js'
export default {
  data () {
    return {
      tableData: [{
      }],
      page: {
        page: 1,
        pagesize: 20
      },
      total: 100
    }
  },

  created () {
    this.loadlist()
  },

  methods: {
    // 获取列表
    async loadlist () {
      const res = await list(this.page)
      this.tableData = res.data.items
      // console.log(res)
      // console.log(this.tableData)
    },
    // 分页
    handleCurrentChange (val) {
      // console.log(val)
      this.page.page = val
      console.log(val)
      this.loadlist()
    },
    handleSizeChange (val) {
      this.page.pagesize = val
      console.log(val)
      this.loadlist()
    }
  }
}
</script>

<style scoped lang="scss">

.app-container{
  padding: 20px;
  .el-card{
      border: 1px solid #ebeef5;
      background-color: #fff;
      color: #303133;
      transition: .3s;
    .el-card_body{
    padding: 20px;
    }
    .el-alert{
    margin-bottom: 20px;
    background-color: #f4f4f5;
    }
    .el-icon-info{
      color:#909399;
      font-size: 16px;
      width: 16px;
    }
    .content{
       display: table-cell;
       padding: 0 8px;
       font-size: 14px;
       color:#909399;
      }
    .el-pagination{
      text-align: right;
      white-space: nowrap;
      padding: 25px 5px;
      color: #303133;
      font-weight: 700;
    }
  }
}

</style>
